<template>
  <div class="input-container">
    <el-input v-model="inputValue" :class="inputClass" @focus="handleFocus" @focusout="handleFocusOut" :style="inputStyle" :placeholder="tips">
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const {width = '100%' , height = '35px' , tips="搜索" , modelValue } = defineProps(['width', 'height' , 'tips' , 'modelValue '])
const inputClass = ref(['input'])

const inputStyle = {
  width: width,
  height: height,
}

const emit = defineEmits(['update:modelValue'])
const inputValue = ref(modelValue || '')

watch(inputValue, (newVal) => {
  emit('update:modelValue', newVal)
})

watch(() => modelValue, (newVal) => {
  inputValue.value = newVal
})

const handleFocus = () => {
  inputClass.value = ['input' , 'active-input']
}

const handleFocusOut = () => {
  inputClass.value = ['input']
}
</script>



<style scoped lang="less">
:deep(.el-input__wrapper) {
  background-color: rgb(234, 234, 234);
}


.active-input {
  :deep(.el-input__wrapper) {
    background-color: white !important;
  }
}

.input {
  font-size: 12px;
  flex: 1;
}
</style>
